<template>
    <div class="file-type-test">
        <el-card>
            <template #header>
                <h3>文件类型支持测试</h3>
            </template>

            <div class="test-info">
                <h4>当前支持的文件类型：</h4>
                <div class="file-types">
                    <el-tag v-for="type in supportedTypes" :key="type" class="type-tag">
                        {{ type }}
                    </el-tag>
                </div>
            </div>

            <div class="upload-test">
                <h4>测试文件上传：</h4>
                <el-upload class="upload-demo" drag :auto-upload="false" :on-change="handleFileTest"
                    :show-file-list="true"
                    accept=".jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.md,.csv,.json,.xml,.html,.css,.js,.zip,.rar,.7z,.tar,.gz,.mp3,.wav,.ogg,.mp4,.avi,.mov">
                    <el-icon>
                        <UploadFilled />
                    </el-icon>
                    <div>拖拽文件到此处测试类型验证</div>
                </el-upload>
            </div>

            <div v-if="testResults.length" class="test-results">
                <h4>测试结果：</h4>
                <el-table :data="testResults" style="width: 100%">
                    <el-table-column prop="fileName" label="文件名" />
                    <el-table-column prop="fileType" label="MIME类型" />
                    <el-table-column prop="extension" label="扩展名" />
                    <el-table-column prop="isSupported" label="是否支持">
                        <template #default="{ row }">
                            <el-tag :type="row.isSupported ? 'success' : 'danger'">
                                {{ row.isSupported ? '支持' : '不支持' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const supportedTypes = [
    '.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg',
    '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
    '.txt', '.md', '.csv', '.json', '.xml', '.html', '.css', '.js',
    '.zip', '.rar', '.7z', '.tar', '.gz',
    '.mp3', '.wav', '.ogg', '.mp4', '.avi', '.mov'
]

const allowedMimeTypes = [
    // 图片类型
    'image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp', 'image/svg+xml',
    // 文档类型
    'application/pdf',
    'application/msword',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'application/vnd.ms-powerpoint',
    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    // 文本类型
    'text/plain', 'text/markdown', 'text/x-markdown', 'text/csv',
    'application/json', 'application/xml', 'text/xml', 'text/html', 'text/css',
    'application/javascript', 'text/javascript',
    // 压缩文件类型
    'application/zip', 'application/x-zip-compressed',
    'application/x-rar-compressed', 'application/x-7z-compressed',
    'application/x-tar', 'application/gzip', 'application/x-gzip',
    // 音频类型
    'audio/mpeg', 'audio/wav', 'audio/ogg',
    // 视频类型
    'video/mp4', 'video/avi', 'video/x-msvideo', 'video/quicktime',
    // 其他
    'application/octet-stream'
]

const testResults = ref([])

const handleFileTest = (uploadFile) => {
    const file = uploadFile.raw
    const extension = '.' + file.name.split('.').pop().toLowerCase()
    const isSupported = allowedMimeTypes.includes(file.type)

    testResults.value.push({
        fileName: file.name,
        fileType: file.type,
        extension: extension,
        isSupported: isSupported
    })

    if (isSupported) {
        ElMessage.success(`文件 ${file.name} 类型受支持`)
    } else {
        ElMessage.warning(`文件 ${file.name} 类型不受支持: ${file.type}`)
    }
}
</script>

<style scoped>
.file-type-test {
    padding: 20px;
}

.test-info {
    margin-bottom: 20px;
}

.file-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.type-tag {
    margin: 2px;
}

.upload-test {
    margin: 20px 0;
}

.test-results {
    margin-top: 20px;
}
</style>
